<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/mainPage.css">
    <link rel="stylesheet" href="/css/nav-top.css">
    <link rel="stylesheet" href="/css/user.css">
    <link rel="shortcut icon" href="https://pets-1046189-pic45.websiteonline.cn/upload/favicon-20190621040405750.ico" type="image/x-icon"/>
    <script src="https://kit.fontawesome.com/59c20db7cc.js" crossorigin="anonymous"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body{
            background-color: #fff;
        }

        nav {
            width: 96%;
            height: 500px; /* only for demonstration, should be removed */
            padding: 20px;
            margin: 0 auto;
        }
    </style>
    <title>个人信息</title>
</head>
<body>
<!-- 顶部样式 -->
<div class="nav-top-1">
    <div class="nav_logo">
        <span  >JPetStore</span>
    </div>
    <div class="nav_search">
        <div id="search">
            <input type="text" class="search_input" id="keyword">
        </div>
        <div id="productAutoComplete">
            <ul id="productAutoList"></ul>
        </div>
    </div>
    <ul class="nav_link">
        <li class="nav-top-item">
            <a href="#" class="link"  >设置</a>
        </li>
        <li class="nav-top-item">
            <a href="#" class="link"  >订单</a>
        </li>
        <li class="nav-top-item">
            <a href="02.html" class="link"><span style="color:#215496;font-weight:bold">商品</span></a>
        </li>
        <li class="nav-top-item">
            <a href="01.html" class="link"  >首页</a>
        </li>
    </ul>
</div>

<div class="panel">
    <form method="post" action="/accounts/update">
<!--        <input value="put" hidden>-->
        <h2 class="title-line">UserInformation</h2>
        <table>
            <tr>
                <td class="line">User ID:</td>
                <td>
                    <input type="text" th:value="${account.userid}" name="userid">
                </td>
            </tr>
            <tr>
                <td class="line">New User ID:</td>
                <td>
                    <input type="text" name="newUserid">
                </td>
            </tr>
            <tr>
                <td class="line">New Password:</td>
                <td><input type="text" value="" name="newPassword"></td>
            </tr>
            <tr>
                <td class="line">Repeat Password:</td>
                <td><input type="text" value="" name="repeatPassword"></td>
            </tr>
        </table>
        <h2 class="title-line">Account Information</h2>
        <table>
            <tr>
                <td class="line">FirstName:</td>
                <td><input type="text" th:value="${account.getFirstName()}" name="firstName"></td>
            </tr>
            <tr>
                <td class="line">LastName:</td>
                <td><input type="text" th:value="${account.getLastName()}" name="lastName"></td>
            </tr>
            <tr>
                <td class="line">Email:</td>
                <td><input type="text" th:value="${account.getEmail()}" name="email"></td>
            </tr>
            <tr>
                <td class="line">Phone:</td>
                <td><input type="text" th:value="${account.getPhone()}" name="phone"></td>
            </tr>
            <tr>
                <td class="line">Address1:</td>
                <td><input type="text" th:value="${account.getAddress1()}" name="address1"></td>
            </tr>
            <tr>
                <td class="line">Address2:</td>
                <td><input type="text" th:value="${account.getAddress2()}" name="address2"></td>
            </tr>
            <tr>
                <td class="line">City:</td>
                <td><input type="text" th:value="${account.getCity()}" name="city"></td>
            </tr>
            <tr>
                <td class="line">State:</td>
                <td><input type="text" th:value="${account.getState()}" name="state"></td>
            </tr>
            <tr>
                <td class="line">Zip:</td>
                <td><input type="text" th:value="${account.getZip()}" name="zip"></td>
            </tr>
            <tr>
                <td class="line">Country:</td>
                <td><input type="text" th:value="${account.getCountry()}" name="country"></td>
            </tr>
        </table>
        <div class="submit-content">
            <span class="btn order-submit" id="submitBtn">
                <input class="context" type="submit" value="Save My Information">
            </span>
        </div>
    </form>
    <p th:text="${updateMsg}"></p>
</div>
</body>
</html>